<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>wechat</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
    html,body{
        height: 100%;
        display: flex;justify-content: center;align-items: center;
    }
    #room{
        width: 600px;
        height: 600px;
        position: relative;
    }
    #room .panel-body{
        padding: 0;
    }
    #room .content{
        height: 460px;overflow-y: auto;
        padding: 10px;
        background: #fff;
    }
    #room .control-box{
        height: 90px;
        padding: 10px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    #room .control-box .btn{
        margin: 0px 15px;
    }
    .list-group-item{
        border: none;
    }
    .list-group-item.other span:after{
        content: ':';
        display: inline-block;
        margin: 0px 3px;
    }
    .list-group-item.me span:before{
        content: ':';
        display: inline-block;
        margin: 0px 3px;
    }
    .list-group-item.me{
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }
    .numbers{
        position: absolute;
        width: 150px;
        top:0;left: -150px;
    }
    .numbers .online,.numbers .clients{
        width: 80%;
        margin-left: 10%;
    }
    .numbers .clients{
        margin-top: 15px;
        height: 400px;
        overflow: auto;
    }
    .p-info{
        font-size: 12px;
        color: rgb(172, 170, 170);
    }
</style>
<body>
	<!-- // 客户端 --连接成功-
					// data    客户端列表
					// 		count:count,  //连接总人数
					// 		clients:clients,//昵称数组
					// 		type:'count',//type:"count"
					// 		nickname:nickname, //昵称
					// 		_type:type  // 1
					// 每个消息 
					// 	{nickname:socket.nickname,msg:msg,type:'msg',isMe:true},
						
		// 客户端  发送数据
					// msg.nickname--昵称   msg.msg--当条信息 -->
    <div id="room" class="panel panel-primary">
        <div class="panel-heading clearfix">
                wechat
            <input id="nickname" placeholder="昵称，默认为好友" style="width:200px;" type="text" class="form-control pull-right">
        </div>
        <div class="panel-body">
            <div class="content">
                <ul class="list-group msgs">
					
				</ul>
            </div>
            <div class="control-box">
                <input id="word" type="text" class="form-control">
                <button id="send" class="btn btn-success">发送</button>
            </div>
        </div>

        <div class="numbers">
            <button class="btn btn-info online">
                在线人数：<span class="count"></span>
            </button>
            <ul class="list-group clients">
                 
            </ul>
        </div>

    </div>
    

    
   
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
	
    //创建客户端的连接socket
  var wsc = new WebSocket('ws://192.168.134.9:3000');


  wsc.onopen = function (e) {//当客户端连接上的时候就会触发
    //console.log('我已经连接上服务端了')
  };

  wsc.onmessage = function (e) {//当服务端返回消息的时候触发
		// e.data--返回的数据 ---聊天列表type:count     消息type:msg
        //  console.log(e.data);
        let info = JSON.parse(e.data)
        switch(info.type){
            case 'msg':   
            handleMsg(info);break;  //渲染聊天数据
            case 'count':
            handleCount(info);break; //渲染用户列表
        }

        
         
  };
// 渲染聊天内容列表
  function handleMsg(info) {
	  console.log(info)
    let str = `	
    <li class="list-group-item ${info.isMe?'me':'other'}">
        <span>${info.nickname}</span>
        <button class="btn btn-success">${info.msg}</button>                    
    </li>
    `	
    let li = $(str)    
    $(".msgs").append(li);//生成的li添加到聊天ul
    li[0].scrollIntoView()  //滚动视图
    word.value = '' //清空输入框
  }
  
  
// 渲染 用户列表
  function handleCount(info) {
	  console.log(info)
      $(".count").html(info.count)//渲染在线人数
      var str = ''
      info.clients.forEach(item => {
          str+='<li class="list-group-item list-group-item-info text-center">'+item+'</li>'
      });
      $(".clients").html(str) //添加用户列表到界面
	  
      //如果有人来或者有人走，需要报一个消息
      if(info.nickname&&info._type){  //_type --1 上线  _type
          $(".msgs").append('<p class="p-info text-center">'+info.nickname+(info._type==1?'加入群聊':'离开群聊')+'</p>')
      }
  }

  $("#send").click(function () {
      send()
  })
  $("#word").keyup(function (e) {
      if(e.keyCode==13){
          send()
      }
  })
// 发送信息
    function send() {
      var nickname = $("#nickname").val() || '好友';//昵称
      var msg = $("#word").val();//发送内容
      // var  reg = /<[^>]+>/g  
      if(msg!=''){
      
            wsc.send(JSON.stringify({nickname:nickname,msg:msg}))
     
            // alert('输入框内请勿输入非法字符')
        
      }else{
          alert('发送内容不能为空，请重新输入')
      }
      
    }

  var canUse = true
  wsc.onclose = function (e) {//当服务端关闭的时候触发
      // alert('聊天服务已经关闭了')
      canUse = false
  };






  wsc.onerror = function (e) {//错误情况触发
      console.log(e)
  }

// if(true){
//  语句
// }else{

// }

// try 语句是  先执行try 语句  如果报错 在执行catch语句，如果不报错 不会执行catch语句
// finally 总是执行的语句

//   try{
//     let x=99;
//     console.log(x)
//   }catch{
//     console.log("错误")
//   }finally{
    
//   }


</script>
</html>